﻿@{
    ViewBag.Title = "John Owl - Kanban";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
     body {
        padding-bottom: 60px;
      }

      /* Custom container */
      .container {
        margin: 0 auto;
        max-width: 1000px;
      }
      .container > hr {
        margin: 60px 0;
      }

      /* Main marketing message and sign up button */
      .jumbotron {
        margin: 40px 0;
        text-align: center;
      }
      .jumbotron h1 {
        font-size: 100px;
        line-height: 1;
      }
      .jumbotron .lead {
        font-size: 24px;
        line-height: 1.25;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
      }

      /* Supporting marketing content */
      .marketing {
        margin: 60px 0;
      }
      .marketing p + h4 {
        margin-top: 28px;
      }

/* Customize the navbar links to be fill the entire space of the .navbar */
      .navbar .navbar-inner {
        padding: 0;
      }
      .navbar .nav {
        margin: 0;
        display: table;
        width: 100%;
      }
      .navbar .nav li {
        display: table-cell;
        width: 1%;
        float: none;
      }
      .navbar .nav li a {
        font-weight: bold;
        text-align: center;
        border-left: 1px solid rgba(255,255,255,.75);
        border-right: 1px solid rgba(0,0,0,.1);
      }
      .navbar .nav li:first-child a {
        border-left: 0;
        border-radius: 3px 0 0 3px;
      }
      .navbar .nav li:last-child a {
        border-right: 0;
        border-radius: 0 3px 3px 0;
      }
</style>

<div class="container">

      <!-- Jumbotron -->
      <div class="jumbotron">
        <h1>Organize everything!</h1>
        <p class="lead">Create a board and organize your tasks with post its.</p>
        <a class="btn btn-large btn-success" href="#NewBoard"  data-toggle="modal">Create my board</a>
      </div>

      <hr>

      <!-- Example row of columns -->
      <div class="row-fluid">
        <div class="span4">
          <h2>Simple</h2>
          <img src="~/Images/pencil-and-paper.jpg" />
          <p>It's as simple as pencil and paper and has the advantage that it can be accessed from anywhere!</p>
        </div>
        <div class="span4">
          <h2>Easy</h2>
            <img src="~/Images/hello-postit.jpg" />
          <p>Just write the text of the task on a post it and drag it through the columns of your board to update the state.</p>
       </div>
        <div class="span4">
          <h2>Visual</h2>
            <img src="~/Images/colorful-postits.jpg" />
          <p>Choose from 4 colors of post its, objectively view your pending tasks.</p>
        </div>
      </div>

      <hr>

      <div class="footer">
        <p style="text-align:center">&copy;2013 <a href="http://johnowl.com">João Paulo Gomes</a></p>
      </div>




<div id="NewBoard" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="NewBoardLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="NewBoardLabel">Create Board</h3>
  </div>
  <div class="modal-body">
    
      <div class="row-fluid">          
         
            <div id="erroNovoQuadro" class="alert alert-error" style="display:none"></div>
            
                <label class="span4">Name</label>
                <input class="span8" autofocus="autofocus" type="text" id="BoardName" />                

                <label class="span4">Columns</label>
                <input class="span8" autofocus="autofocus" type="text" id="BoardColumns" value="To Do, Doing, Done" />

        </div>
      
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="btn btn-primary" id="CreateBoard">Create</button>
  </div>
</div>

    </div> <!-- /container -->


@section scripts{
    <script type="text/javascript">
        $(function () {

            $('.modal').on('shown', function () {
                $(this).find('[autofocus]:first').focus();
            });

            $('#CreateBoard').on('click', function () {

                var board = GetBoard();

                if(BoardIsValid(board)){
                    CreateBoard(board);
                }
            });

            function CreateBoard(board) {

                var req = $.ajax({
                    url: '@Url.Action("Create")',
                    type: 'POST',
                    dataType: 'json',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(board)
                });
                
                req.done(function (key) {
                    location.href = '@Url.Content("~/Board/")' + key;
                });

                req.fail(function (jqXHR, textStatus, errorThrown) {
                    var result = $.parseJSON(jqXHR.responseText);
                    alert(result["ExceptionMessage"]);
                });
            }

            function GetBoard() {

                var name = GetName();
                var columns = GetColumns();

                var board = {};
                board.Name = name;
                board.Columns = columns;

                return board;
            }

            function BoardIsValid(board) {
                
                if (!ValidateName(board.Name)) {
                    return false;
                }
                
                if (!ValidateColumns(board.Columns)) {
                    return false;
                }
              
                return true;
            }

            function GetName(){
                var name = $('#BoardName').val();
                return $.trim(name);
            }

            function GetColumns() {
                
                var c = $('#BoardColumns').val().split(',');

                var columns = [];
                for (i = 0; i < c.length; i++) {
                    var item = $.trim(c[i]);
                    if (item != '') {
                        columns.push(item);
                    }
                }
                return columns;
            }

            function ValidateName(name) {

                if (name == '') {
                    alert('You need to fill the name field.');
                    $('#BoardName').focus();
                    return false;
                }

                return true;
            }

            function ValidateColumns(columns) {

                if (columns.length < 2) {
                    alert('You need at least 2 column names.');
                    $('#BoardColumns').focus();
                    return false;
                }

                return true;
            }

        });
    </script>
}